<template>
  <div>
  <ul>
    <form>
        姓名: <input type="text" v-model="name">
        密码: <input type="password" v-model="password">
        <button @click="login">登录</button>
  </form>
  </ul>
</div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data() {
    return {
      name: "",
      password: "",
    };
  },

  methods: {
    login() {
      this.$http({
        method: 'post',
        url: 'http://localhost/login.php',
        data: {
          name: this.name,
          password: this.password
        },
        transformRequest: [
          function (data) {
            let ret = ''
            for (const it in data) {
              ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
            }
            ret = ret.substring(0, ret.lastIndexOf('&'))
            return ret
          }
        ],
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      }).then((res) => {
        const data = res.data
        if (data.code === 0) {
          this.$router.push({
            path: '/about'
          })
        }
        console.log(res);
      });
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
